<template>
	<view class="wanlshop-category-container">
		<view class="fp-container fp-top" style="border-radius: 20rpx">
			发票类型
			<!-- <uni-data-picker placeholder="请选择发票类型" popup-title="请选择开票类型" :localdata="dataTree" v-model="invoice"></uni-data-picker> -->

			<uni-data-picker class="custom-picker" v-slot:default="{data, error, options}" popup-title="请选择发票类型"
				:localdata="dataTree" v-model="invoice">
				<view v-if="error" class="error">
					<text>{{error}}</text>
				</view>
				<view v-else-if="data.length" class="selected">
					<view v-for="(item,index) in data" :key="index" class="selected-item">
						<text class="fs15">{{item.text}}</text>
					</view>
				</view>
				<view v-else class="flex flex-end">
					<text class="gray-font mr5 fs15">请选择发票类型</text>
					<!-- <uni-icons type="right" size="20" color="#999"></uni-icons> -->
				</view>
			</uni-data-picker>
		</view>

		<view class="example">
			<view class="example-switch">
				<view>抬头类型</view>
				<view>
					<radio-group style="display: flex; align-items: center"
						:class="checked == 1 ? 'shake-horizontal' : ''" class="auth-clause" @change="billingType"
						v-model="selectedValue">
						<radio :value="1" checked="true" style="transform: scale(0.7)" /> <text
							style="margin-left:10rpx;">个人</text>
						<br />
						<radio :value="2" style="margin-left:10rpx;transform: scale(0.7)" /><text
							style="margin-left:10rpx;">企业</text>
					</radio-group>
				</view>
			</view>
			<!-- 自定义表单校验 -->
			<uni-forms ref="customForm" :rules="customRules" :modelValue="form" label-width="100px" class="cusForm"
				label-align="left" v-if="!personal">
				<uni-forms-item label="发票抬头" required name="title">
					<uni-easyinput v-model="form.title" placeholder="请填写需要开具发票的企业抬头" :inputBorder="false"
						:input-style="{ textAlign: 'right' }" placeholder-style="text-align: right;"
						primaryColor="#fd8c00" />
				</uni-forms-item>
				<uni-forms-item label="税号" required name="tax_id_no">
					<uni-easyinput v-model="form.tax_id_no" placeholder="纳税人识别号" :inputBorder="false"
						:input-style="{ textAlign: 'right' }" primaryColor="#fd8c00" />
				</uni-forms-item>
				<uni-forms-item label="电子邮箱" required name="email">
					<uni-easyinput v-model="form.email" placeholder="请填写接收发票的电子邮箱" :inputBorder="false"
						:input-style="{ textAlign: 'right' }" primaryColor="#fd8c00" />
				</uni-forms-item>

				<uni-forms-item label="开户银行">
					<uni-easyinput v-model="form.bank" placeholder="选填" :inputBorder="false"
						:input-style="{ textAlign: 'right' }" primaryColor="#fd8c00" />
				</uni-forms-item>
				<uni-forms-item label="银行账号">
					<uni-easyinput v-model="form.bank_account" placeholder="选填" :inputBorder="false"
						:input-style="{ textAlign: 'right' }" primaryColor="#fd8c00" />
				</uni-forms-item>
				<uni-forms-item label="企业地址">
					<uni-easyinput v-model="form.registered_address" placeholder="选填" :inputBorder="false"
						:input-style="{ textAlign: 'right' }" primaryColor="#fd8c00" />
				</uni-forms-item>
				<uni-forms-item label="企业电话">
					<uni-easyinput v-model="form.registered_phone" placeholder="选填" :inputBorder="false"
						:input-style="{ textAlign: 'right' }" primaryColor="#fd8c00" />
				</uni-forms-item>
			</uni-forms>


			<uni-forms ref="customForm" :rules="customRules" :modelValue="form" label-width="100px" class="cusForm"
				label-align="left" v-if="personal">
				<uni-forms-item label="发票抬头" required name="title">
					<uni-easyinput v-model="form.title" placeholder="请填写需要开具发票的企业抬头" :inputBorder="false"
						:input-style="{ textAlign: 'right' }" placeholder-style="text-align: right;"
						primaryColor="#fd8c00" class="easyInput" />
				</uni-forms-item>

				<uni-forms-item label="电子邮箱" required name="email">
					<uni-easyinput v-model="form.email" placeholder="请填写接收发票的电子邮箱" :inputBorder="false"
						:input-style="{ textAlign: 'right' }" primaryColor="#fd8c00" />
				</uni-forms-item>
			</uni-forms>
		</view>

		<!-- <checkbox-group style="
        margin: 20px auto 20px auto;
        display: flex;
        width: 86%;
        align-items: center;" :class="checked == 1 ? 'shake-horizontal' : ''" class="auth-clause" @change="CheckboxChange">
			<checkbox :class="checked == 2 ? 'checked' : ''" :checked="checked == 2 ? true : false" value="2"
				style="transform: scale(0.7)" />
			<view class="text-right" style="margin-left: 4px">
				我已阅读并同意
				<text style="color: red; margin-left: 4px" @tap="toDetail">《增值税专用发票抬头确认书》</text>
			</view>
		</checkbox-group> -->
		
		<checkbox-group style="padding: 0 15px; box-sizing: border-box;" :class="checked == 1 ? 'shake-horizontal' : ''"
			class="auth-clause flex mt10 justify-center" @change="CheckboxChange">
			<checkbox :class="checked == 2 ? 'checked' : ''" :checked="checked == 2 ? true : false" value="2" style="transform: scale(0.7);"/>
			<view class="flex align-center" style="margin-left: 4px; font-size: 28rpx;">
				我已阅读并同意
				<text style="color: red; margin-left: 4px" @tap="toDetail">《增值税专用发票抬头确认书》</text>
			</view>
		</checkbox-group>

		<button type="primary" @click="submit('customForm')" class="FormButton">
			提交
		</button>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				dataTree: [{
						text: "普通发票-电子",
						value: "digital_general",
					},
					{
						text: "普通专票-电子",
						value: "digital_special",
					}
				],
				selectedValue: 1,
				classes: [],
				personal: true,
				checked: "",
				invoice: "digital_general",
				form: {
					title: "",
					tax_id_no: "",
					email: "",
					bank: "",
					bank_account: "",
					registered_address: "",
					registered_phone: "",
				},
				customRules: {
					Rise: {
						rules: [{
							required: true,
							errorMessage: "请输入发票抬头",
						}, ],
					},
					tax_id_no: {
						rules: [{
							required: true,
							errorMessage: "请输入纳税人识别号",
						}, ],
					},
					email: {
						rules: [{
							required: true,
							errorMessage: "请输入邮箱",
						}, ],
					},
				},
			};
		},
		computed: {
			...mapState(["common", "cart"]),
			appStyle() {
				let style = this.common.appStyle;
				// uni.setNavigationBarColor({
				// 	backgroundColor: style.home_nav_color
				// });
				return style;
			},
		},
		onShow() {
			let read = uni.getStorageSync('invoice_check');
			console.log('read', read)
			if (read) this.checked = read;
		},
		onLoad(options) {
			// this.datas = JSON.parse(options.datas)
			// this.shop_id = options.shop_id
			// console.log(datas,shop_id,'onLoad')
		},
		methods: {
			toDetail() {
				this.$wanlshop.to('/pages/invoice/relatedPolicies')
			},
			change(e) {
				console.log(e, 'change')
			},
			billingType(e) {
				console.log(e, 'Type')
				// personal
				this.personal = e.detail.value == '1' ? true : false;
			},
			CheckboxChange(e) {
				this.checked = e.detail.value;

			},
			submit() {
				if (!this.checked) {
					this.$wanlshop.msg('请阅读并同意《增值税专用发票抬头确认书》')
					return;
				}

				let storedUserInfo = uni.getStorageSync('order_info');
				let is_order_list = uni.getStorageSync('is_order_list');
				is_order_list = JSON.parse(is_order_list)
				storedUserInfo = JSON.parse(storedUserInfo)

				this.$refs.customForm
					.validate()
					.then((res) => {
						console.log("表单数据信息：", res);
						const data = {
							order_id_list: is_order_list,
							shop_id: storedUserInfo.shop_id,
							type: this.invoice,
							title_type: this.personal ? 'personal' : 'company',
							title: this.form.title,
							email: this.form.email,
							tax_id_no: this.form.tax_id_no,
							registered_address: this.form.registered_address,
							registered_phone: this.form.registered_phone,
							bank: this.form.bank,
							bank_account: this.form.bank_account,
							remarks: this.form.remarks,
						}

						console.log('提交', data)

						this.$api.post({
							url: "/wanlshop/invoice/apply",
							data,
							success: (res) => {
								console.log('提交开票', res)
								if (res.code == 1) {
									this.$wanlshop.msg('开票成功');
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/user'
										})
									}, 1000)
								}
							},
						});
					})
					.catch((err) => {
						console.log("表单错误信息：", err);
						this.$wanlshop.msg('请完善开票内容')
					});
			},
		},
	};
</script>

<style>
	page {
		background-color: #f6efe9;
	}
</style>

<style lang="scss" scoped>
	.cusForm {
		border-radius: 30px;


	}

	.wanlshop-category-container {
		background-color: var(--bg);
	}

	.navigator {
		box-sizing: border-box;
		/* #ifdef MP */
		padding-right: 220rpx;
		/* #endif */
	}

	.cu-custom .cu-bar {
		z-index: 99;
	}

	.cu-bar .action {
		position: relative;
	}

	/* #ifdef MP */
	.cu-bar .search-form {
		margin: 0 0 0 25rpx;
	}

	/* #endif */

	.currentInvoicing {
		// display: flex;
		width: 92%;
		padding: 0 15px;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx auto 0 auto;
	}

	.currentHeader {
		padding-top: 24rpx;
	}

	.fp-top {
		margin: 20rpx auto 0 auto;
	}

	.fp-container {
		display: flex;
		justify-items: center;
		justify-content: space-between;
		height: 80rpx;
		width: 92%;
		padding: 20rpx 15px;
		background-color: #fff;
		box-sizing: border-box;
	}

	.example-switch {
		display: flex;
		justify-items: center;
		justify-content: space-between;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 20rpx;
		border-bottom: 1px solid #e5e5e5;

		.auth-clause {
			::v-deep .custom-radio {
				width: 20rpx;
				/* 调整按钮的宽度 */
				height: 20rpx;
				/* 调整按钮的高度 */
			}
		}
	}

	.example {
		margin: 0rpx auto 0 auto;
		width: 92%;
		padding: 0 15px;
		background-color: #fff;
		border-radius: 20rpx;
	}

	

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.FormButton {
		width: 710rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 756rpx;
		background: $theme !important;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 30rpx;
		font-size: 28rpx;
	}

	uni-checkbox.checked ::v-deep .uni-checkbox-input {
		border-radius: 50% !important;
	}

	uni-checkbox.checked ::v-deep .uni-checkbox-input-checked {
		background-color: $theme !important;
		border-color: $theme !important;
	}

	wx-checkbox ::v-deep .wx-checkbox-input {
		border-radius: 50% !important;
	}

	wx-checkbox ::v-deep .wx-checkbox-input-checked {
		background-color: $theme !important;
		border-color: $theme !important;
	}

	// /* 可以通过自定义类来设置更多样式 */
	::v-deep .uni-forms-item {
		border-bottom: 1px solid #e5e5e5;
		/* 设置边框为1px的灰色 */
		margin-bottom: 0rpx !important;
	}

	::v-deep .custom-radio {
		width: 30rpx;
		/* 调整按钮的宽度 */
		height: 30rpx;
		/* 调整按钮的高度 */
	}

	::v-deep .input-value-border {
		border: none !important;
	}

	::v-deep .input-value {
		height: 80rpx !important;
	}
</style>

<style>
	/* 对应的外围样式调整 */
	.radio-label {
		display: inline-flex;
		align-items: center;
		margin-right: 20rpx;
	}
</style>